<template>
  <fullModal
    v-model:visible="visible"
    :mask-closable="false"
    :unmount-on-close="true"
    :modal-class="'user-modal'"
    :align-center="false"
    :top="'121px'"
    @cancel="handleCancel"
  >
    <template #title>
      <div class="modal-title-box">
        <div class="left">{{ props.title }}</div>
        <div class="right"></div>
      </div>
    </template>
    <userBox
      v-if="modalType === 'user'"
      v-model:user="user"
      :type="modalType"
      :root-dept-name="props.rootDeptName"
    />
    <userBox
      v-else
      v-model:user="dept"
      :type="modalType"
      :root-dept-name="props.rootDeptName"
    />
    <template #footer>
      <div class="modal-footer-box">
        <a-button type="outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleBeforeOk">确定</a-button>
      </div>
    </template>
  </fullModal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { defineProps, ref, watch } from 'vue';
  import fullModal from '@/common/components/full-screen-modal/index.vue';
  import userBox from './userBox.vue';

  const emit = defineEmits(['close', 'update:user', 'update:dept', 'handleOk']);
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    user: {
      type: Object,
      default: () => {
        return {};
      },
    },
    dept: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: String,
      default: 'user',
    },
    rootDeptName: {
      type: String,
      default: '',
    },
  });
  interface User {
    userName: string;
    userId: string;
  }
  interface Dept {
    name: string;
    id: string;
  }
  const visible = ref(true);
  const user = ref<User>({
    userName: '',
    userId: '',
  });
  const dept = ref<Dept>({
    name: '',
    id: '',
  });
  const modalType = ref('');
  watch(
    () => props.type,
    (n) => {
      modalType.value = n;
      console.log(modalType.value, 'modalType.value');
    },
    {
      immediate: true,
      deep: true,
    }
  );
  const handleCancel = () => {
    emit('close');
  };
  const handleBeforeOk = () => {
    if (props.type === 'user') {
      emit('update:user', user.value);
      emit('handleOk', user.value);
    } else {
      emit('handleOk', dept.value);
      emit('update:user', dept.value);
    }
    emit('close');
  };
</script>

<style lang="less">
  .user-modal {
    display: flex !important;
    flex-direction: column;
    width: 560px !important;
    height: 492px !important;
    background: #fff;

    .arco-modal-header {
      .arco-modal-title {
        .modal-title-box {
          width: 100%;
          text-align: left;

          .left {
            color: #1e2228;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
    }

    .arco-modal-body {
      height: calc(100% - 108px);
      padding: 16px 24px;
    }

    .arco-modal-footer {
      padding: 10px 24px;

      button {
        margin-left: 8px;
        padding: 5px 16px;
        font-size: 14px;
        line-height: 22px;
        border-radius: 4px;
      }
    }
  }
</style>
